<template>
  <!-- 添加活动 -->
  <el-form :inline="true" :model="activityQuery" :rules="activityRules">

    <el-form-item label="负责人">
      <el-select
        v-model="activityQuery.ownerId"
        placeholder="请选择负责人"
        clearable
        @click="loadOwner()"
      >
      <el-option
          v-for="item in owners"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
      </el-select>
    </el-form-item>

    <el-form-item label="活动名称">
      <el-input v-model="activityQuery.activityName" placeholder="请输入活动名称" clearable />
    </el-form-item>


    <el-form-item label="活动时间" class="date">
        <el-date-picker
        v-model="activityQuery.activityTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <el-form-item label="创建时间" class="createTime">
        <el-date-picker
        v-model="activityQuery.createTime"
        type="datetime"
        placeholder="请选择创建时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item>
        <el-button type="primary" plain @click="onReset()">重置</el-button>
        <el-button type="primary" @click="onSearch()">搜索</el-button>
    </el-form-item>

  </el-form>

  <hr>

  <!-- 活动列表 -->
  <el-button type="primary" @click="addUser()">录入市场活动</el-button>
    <el-button type="danger" @click="batchDel()">批量删除</el-button>
    <el-table
        :data="activityList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
        <!-- 复选框    -->
        <el-table-column type="selection" width="28%" />
        <el-table-column type="index" label="序号" width="52%" />
        <el-table-column prop="ownerDO.name" label="负责人" width="75%" show-overflow-tooltip />
        <el-table-column property="name" label="活动名称" width="100%" show-overflow-tooltip />
        <el-table-column property="startTime" label="开始时间" show-overflow-tooltip />
        <el-table-column property="endTime" label="结束时间" show-overflow-tooltip />
        <el-table-column property="cost" label="活动预算" width="80%" show-overflow-tooltip />
        <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
                <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
                <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button> 
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <div class="parent">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="toPage"
        @next-click="toPage"
        @current-change="toPage"
     />
    </div>
</template>

<script>
import { doGet,doDelete } from '../http/httpRequest.js';
import { messageTip,messageConfirm } from '../util/util.js'
export default {
    name:"activityView",
    mounted(){
      this.getData(1);
    },
    inject : ["reload"],
    data(){
        return {
            activityQuery : {},
            activityList : [{
              ownerDO : {}
            }],
            selectedIds : [],
            selectedIds : [],
            pageSize : 0,
            total : 0,
            owners : [{
              id : 0,
              name : ""
            }],
            activityRules : {
              // 定义市场活动表单验证规则
              cost : [
                { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
              ]
            }
        }
    },
    methods : {
        // 勾选或者取消勾选触发
        handleSelectionChange(selectionItems){
            this.selectedIds = [];
            // 将已经勾选的数据传给我们
            selectionItems.forEach(data => {
                this.selectedIds.push(data.id);
            });
        },
        edit(id){
          this.$router.push("/dashboard/activity/edit/"+id);
        },
        view(id){
          this.$router.push("/dashboard/activity/detail/"+id);
        },
        del(id){
          messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                doDelete("/api/activity/delete/"+id,{}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消删除","warning");
            });
        },
        batchDel(){
          if(!this.selectedIds.length){
                messageTip("请选择要删除的数据","warning");
                return;
            }
            messageConfirm("注意:删除后不可恢复","您确定要删除?").then(() => {
                let ids = this.selectedIds.join(",");
                doDelete("/api/activity/batchDel",{ids : ids}).then(resp => {
                    if(resp.data.code === 200){
                        messageTip("批量删除成功","success");
                        this.reload();
                    }
                    else{
                        messageTip("批量删除失败:"+resp.data.msg,"error");
                    }
                });
            }).catch(() => {
              messageTip("已取消批量删除","warning");
            });
        },
        onReset(){
          this.activityQuery = {};
        },
        addUser(){
          this.$router.push("/dashboard/activity/add");
        },
        onSearch(){
          this.getData(1);
        },
        toPage(current){
            // 把当前页作为current传递给获取数据方法,就可以实现分页查询了
            this.getData(current);
        },
        getData(current){
          //开始时间
          let startTime = '';
          // 结束时间
          let endTime = '';
          for( let key in this.activityQuery.activityTime){
            if(key === '0'){
              startTime = this.activityQuery.activityTime[key];
            }
            if(key === '1'){
              endTime = this.activityQuery.activityTime[key];
            }
          }
          //获取数据,查询用户列表数据
          doGet("/api/activities",{
              // 当前查询第几页
              current : current,
              // 6个搜索条件
              ownerId : this.activityQuery.ownerId,
              name : this.activityQuery.activityName,
              startTime : startTime,
              endTime : endTime,
              cost : this.activityQuery.cost,
              createTime : this.activityQuery.createTime
          }).then(resp => {
              if(resp.data.code === 200){
                  this.activityList = resp.data.data.list;
                  this.total = resp.data.data.total;
                  this.pageSize = resp.data.data.pageSize;
              }
              else{
                messageTip("网络错误","error");
              }
          });
        },
        loadOwner(){
          doGet("/api/user/activityOwner",{}).then(resp => {
                if(resp.data.code === 200){
                  this.owners = resp.data.data;
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        }
    }
}
</script>

<style scoped>
.el-form-item{
    width: 20%;
}
.date{
    width: 50%;
}
.createTime{
    width: 30%;
}
</style>